<template>
	<view class="content">
		<view class="hint"><text>为维护大家的利益，请严格遵守《平台服务规范》</text></view>
		<radio-group @change="servePlayTypeChange" class="play-type-radio-group">
			<label v-for="(item, index) in servePlayTypeList" :key="index" class="radio-item-label">
				<view><radio :value="item.Value" :checked="item.Value === registInfo.ServePlayType" /></view>
				<view class="radio-item-label-title">{{ item.Description }}</view>
			</label>
		</radio-group>
		<view class="vc-item" v-if="registInfo.HeadImg.length == 0" @click="uploadheader">
			<image src="@/static/images/touxiang.png" class="header-img" @click="uploadheader"></image>
			<view class="vc-item-content">
				<view class="choose-tips-text">更改头像</view>
				<image class="vc-item-arrow" src="@/static/images/right.png"></image>
			</view>
		</view>
		<view v-else class="vc-item" @click="uploadheader">
			<image :src="registInfo.HeadImg" class="header-img"></image>
			<view class="vc-item-content">
				<view class="choose-tips-text">更改头像</view>
				<image class="vc-item-arrow" src="@/static/images/right.png"></image>
			</view>
		</view>

		<!--线下教练-->
		<view v-if="registInfo.ServePlayType == '1'">
			<view class="vc-item">
				<view>
					工作地点
					<text class="tips-text" style="margin-left: 10rpx;">(必填)</text>
				</view>
				<view class="vc-item-content">
					<picker :range="wordadds" range-key="text" :value="registInfo.City" @change="changeAddress">
						<view>{{ registInfo.City }}</view>
					</picker>
					<image class="vc-item-arrow" src="@/static/images/right.png"></image>
				</view>
			</view>
			<view class="vc-item">
				<view>
					工作时间
					<text class="tips-text" style="margin-left: 10rpx;">(必填)</text>
					<view class="tips-text" style="margin-top: 10rpx;">全天接单请选择00:00—00:00</view>
				</view>
				<view class="vc-item-content">
					<picker mode="multiSelector" :range="timeRange" @change="startTimeChange" :value="registInfo.BeginTime" class="list-item-content work-time">
						<view>{{ registInfo.BeginTime }}</view>
					</picker>
					<view class="date-line"></view>
					<picker mode="multiSelector" :range="timeRange" @change="endTimeChange" :value="registInfo.EndTime" class="list-item-content work-time">
						<view>{{ registInfo.EndTime }}</view>
					</picker>
					<image class="vc-item-arrow" src="@/static/images/right.png"></image>
				</view>
			</view>
			<view class="vc-item">
				<view>
					时薪
					<text class="tips-text" style="margin-left: 10rpx;">(必填)</text>
				</view>
				<view class="vc-item-content">
					<input
						class="vc-item-content-input"
						placeholder-class="vc-item-content-input-placeholder"
						v-model="hourlyWage"
						@change="getHourlyWage"
						maxlength="10"
						type="number"
						placeholder="请输入时薪"
					/>
					<image class="vc-item-arrow" src="@/static/images/right.png"></image>
				</view>
			</view>
			<view class="vc-item">
				<view>
					昵称
					<text class="tips-text" style="margin-left: 10rpx;">(必填)</text>
				</view>
				<view class="vc-item-content">
					<input
						class="vc-item-content-input"
						placeholder-class="vc-item-content-input-placeholder"
						v-model="registInfo.NickName"
						maxlength="20"
						placeholder="请输入昵称"
					/>
					<image class="vc-item-arrow" src="@/static/images/right.png"></image>
				</view>
			</view>
			<view class="vc-item">
				<view>
					手机
					<text class="tips-text" style="margin-left: 10rpx;">(必填)</text>
				</view>
				<view class="vc-item-content">
					<input
						class="vc-item-content-input"
						placeholder-class="vc-item-content-input-placeholder"
						v-model="registInfo.Phone"
						maxlength="11"
						type="number"
						placeholder="请输入手机号"
					/>
					<image class="vc-item-arrow" src="@/static/images/right.png"></image>
				</view>
			</view>
			<view class="vc-item">
				<view>
					性别
					<text class="tips-text" style="margin-left: 10rpx;">(必填)</text>
				</view>
				<view class="vc-item-content">
					<picker class="vc-item-content" :range="ganders" range-key="text" :value="registInfo.Gender" @change="changeGander">
						<view>{{ registInfo.Gender }}</view>
					</picker>
					<image class="vc-item-arrow" src="@/static/images/right.png"></image>
				</view>
			</view>
			<view class="vc-item">
				<view>生日</view>
				<view class="vc-item-content">
					<picker mode="date" @change="birthdayChange" :value="birthday" class="list-item-content">
						<view v-if="registInfo.BirthDay">{{ registInfo.BirthDay }}</view>
						<view v-else class="vc-item-content-input-placeholder">请选择生日</view>
					</picker>
					<image class="vc-item-arrow" src="@/static/images/right.png"></image>
				</view>
			</view>
			<view class="vc-item" :style="{ paddingBottom: registInfo.ServeTagList.length == 0 ? '30rpx' : '20rpx' }">
				<view>标签</view>
				<view class="vc-item-content" @click="showTagsPicker">
					<view v-if="registInfo.ServeTagList.length == 0" class="vc-item-content-input-placeholder">选择属于你的标签吧</view>
					<image class="vc-item-arrow" src="@/static/images/right.png"></image>
				</view>
			</view>
		</view>
		<!--线下教练 end-->

		<!--线上教练-->
		<view v-if="registInfo.ServePlayType == '2'">
			<view class="vc-item">
				<view>
					工作时间
					<text class="tips-text" style="margin-left: 10rpx;">(必填)</text>
					<view class="tips-text" style="margin-top: 10rpx;">全天接单请选择00:00—00:00</view>
				</view>
				<view class="vc-item-content">
					<picker mode="multiSelector" :range="timeRange" @change="startTimeChange" :value="registInfo.BeginTime" class="list-item-content work-time">
						<view>{{ registInfo.BeginTime }}</view>
					</picker>
					<view class="date-line"></view>
					<picker mode="multiSelector" :range="timeRange" @change="endTimeChange" :value="registInfo.EndTime" class="list-item-content work-time">
						<view>{{ registInfo.EndTime }}</view>
					</picker>
					<image class="vc-item-arrow" src="@/static/images/right.png"></image>
				</view>
			</view>
			<view class="vc-item">
				<view>
					价格
					<text class="tips-text" style="margin-left: 10rpx;">(必填)</text>
				</view>
				<view class="vc-item-content">
					<input
						class="vc-item-content-input"
						placeholder-class="vc-item-content-input-placeholder"
						v-model="hourlyWage"
						@change="getHourlyOnlineWage"
						maxlength="10"
						type="number"
						placeholder="请输入价格(元/小时)"
					/>
					<image class="vc-item-arrow" src="@/static/images/right.png"></image>
				</view>
			</view>
			<view class="vc-item">
				<view>
					昵称
					<text class="tips-text" style="margin-left: 10rpx;">(必填)</text>
				</view>
				<view class="vc-item-content">
					<input
						class="vc-item-content-input"
						placeholder-class="vc-item-content-input-placeholder"
						v-model="registInfo.NickName"
						maxlength="20"
						placeholder="请输入昵称"
					/>
					<image class="vc-item-arrow" src="@/static/images/right.png"></image>
				</view>
			</view>
			<view class="vc-item">
				<view>
					手机
					<text class="tips-text" style="margin-left: 10rpx;">(必填)</text>
				</view>
				<view class="vc-item-content">
					<input
						class="vc-item-content-input"
						placeholder-class="vc-item-content-input-placeholder"
						v-model="registInfo.Phone"
						maxlength="11"
						type="number"
						placeholder="请输入手机号"
					/>
					<image class="vc-item-arrow" src="@/static/images/right.png"></image>
				</view>
			</view>
			<view class="vc-item">
				<view>
					性别
					<text class="tips-text" style="margin-left: 10rpx;">(必填)</text>
				</view>
				<view class="vc-item-content">
					<picker class="vc-item-content" :range="ganders" range-key="text" :value="registInfo.Gender" @change="changeGander">
						<view>{{ registInfo.Gender }}</view>
					</picker>
					<image class="vc-item-arrow" src="@/static/images/right.png"></image>
				</view>
			</view>
			<view class="vc-item">
				<view>生日</view>
				<view class="vc-item-content">
					<picker mode="date" @change="birthdayChange" :value="birthday" class="list-item-content">
						<view v-if="registInfo.BirthDay">{{ registInfo.BirthDay }}</view>
						<view v-else class="vc-item-content-input-placeholder">请选择生日</view>
					</picker>
					<image class="vc-item-arrow" src="@/static/images/right.png"></image>
				</view>
			</view>
			<view class="vc-item" :style="{ paddingBottom: registInfo.ServeTagList.length == 0 ? '30rpx' : '20rpx' }">
				<view>
					标签
					<text class="tips-text" style="margin-left: 10rpx;">(必填)</text>
				</view>
				<view class="vc-item-content" @click="showTagsPicker">
					<view v-if="registInfo.ServeTagList.length == 0" class="vc-item-content-input-placeholder">选择属于你的标签吧</view>
					<image class="vc-item-arrow" src="@/static/images/right.png"></image>
				</view>
			</view>
		</view>
		<!--线上教练 end-->
		<view class="vc-item" style="border-bottom: unset;">
			<view>签名</view>
			<view class="vc-item-content" @click="changeSetSign">
				<view v-if="!registInfo.Sign" class="choose-tips-text">填写您的个性签名吧</view>
				<image class="vc-item-arrow" src="@/static/images/right.png"></image>
			</view>
		</view>
		<view class="select-protocol">
			<checkbox :checked="isAgree" @click="clickCheckbox(isAgree)" />
			<text style="margin-left:16rpx ;">我已同意</text>
			<text class="select-protocol-link" @click="handleService">《网咖服务协议》</text>
		</view>
		<view class="next"><button class="next-btn bottom-change-view" type="warn" :disabled="false" @click="next">下一步</button></view>
	</view>
</template>

<script>
import { isLogin, toLogin, isBlankString, isPhoneNumber } from '@/config/common.js';
import { uploadImageToQiNiu } from '@/constant/home.js';

import { getCityAddressList } from '@/constant/customer.js';
import { getServePlayTypeList } from '@/constant/server.js';

const ganderArray = [
	{
		id: '男',
		text: '男'
	},
	{
		id: '女',
		text: '女'
	}
];
export default {
	components: {},
	data() {
		return {
			ganders: ganderArray,
			wordadds: [],
			registInfo: {
				Id: uni.getStorageSync('customerId'),
				City: '',
				NickName: '',
				HeadImg: '',
				Phone: '',
				Gender: '男',
				BirthDay: '',
				Sign: '',
				HourlyWage: '',
				IdCardNo: '',
				IdCardImg1: '',
				IdCardImg2: '',
				BeginTime: '08:00',
				EndTime: '23:30',
				FullName: '',
				VerifyImg: '',
				ServeTagList: [],
				ServePlayType: '1'
			},
			hourlyWage: '',
			tagsDrawerView: false,
			timeRange: [],
			isAgree: false,
			servePlayTypeList: []
		};
	},
	created: function() {
		//时间控件的选项
		let hour = [];
		let minute = ['00', '30'];
		for (var i = 0; i < 24; i++) {
			hour.push([(Array(2).join(0) + i).slice(-2)]);
		}
		this.timeRange = [hour, minute];
	},
	onShow() {
		this.initNextPageData();
	},
	onLoad() {
		if (isLogin()) {
			this.getCityAddressList();
			this.getServePlayTypeList();
			let result = uni.getStorageSync('customerInfo');
			this.registInfo.HeadImg = result.HeadImg;
		} else {
			toLogin();
		}
	},
	methods: {
		initNextPageData() {
			var pages = getCurrentPages();
			var currPage = pages[pages.length - 1];
			if (!currPage.sign) {
				this.registInfo.Sign = '';
			} else {
				this.registInfo.Sign = currPage.sign;
			}
			if (!currPage.allSelectedTag) {
				this.registInfo.ServeTagList = [];
			} else {
				this.registInfo.ServeTagList = currPage.allSelectedTag;
			}
		},
		clickCheckbox(e) {
			this.isAgree = !e;
		},
		uploadheader() {
			let that = this;
			uploadImageToQiNiu(1, 8, res => {
				that.registInfo.HeadImg = res;
			});
		},
		async getServePlayTypeList() {
			let res = await getServePlayTypeList();
			this.servePlayTypeList = res;
			this.servePlayTypeList.forEach(item => {
				item.Value = item.Value + '';
			});
		},
		async getCityAddressList() {
			let res = await getCityAddressList();
			this.wordadds = res;
			if (res.length > 0) {
				this.registInfo.City = res[0].id;
			}
		},
		getHourlyWage: function(e) {
			if (!isBlankString(e.target.value)) {
				let wage = e.target.value.replace('￥', '').replace('/小时', '');
				this.registInfo.HourlyWage = wage;
				this.hourlyWage = '￥' + wage + '/小时';
			}
		},
		getHourlyOnlineWage: function(e) {
			if (!isBlankString(e.target.value)) {
				let wage = e.target.value.replace('￥', '').replace('/小时', '');
				this.registInfo.HourlyWage = wage;
				this.hourlyWage = '￥' + wage + '/小时';
			}
		},
		birthdayChange: function(e) {
			this.registInfo.BirthDay = e.target.value;
		},
		showTagsPicker: function() {
			// this.tagsPickerView = true;
			// this.$refs.tagsFrawer.open();
			const _that = this;
			uni.navigateTo({
				url:
					'/packagePages/playercenter/regist/choosetag/index?saveType=regist&servePlayType=' +
					_that.registInfo.ServePlayType +
					' &serveTagList=' +
					encodeURIComponent(JSON.stringify(_that.registInfo.ServeTagList))
			});
		},
		servePlayTypeChange: function(e) {
			this.registInfo.ServePlayType = e.detail.value;
			this.hourlyWage = '';
			this.registInfo.HourlyWage = '';
		},
		changeGander: function(e) {
			this.registInfo.Gender = this.ganders[e.detail.value].id;
			//this.registInfo.Gender = gander.id;
		},
		handleService: function() {
			uni.navigateTo({
				url: './components/service-terms'
			});
		},
		changeAddress: function(e) {
			this.registInfo.City = this.wordadds[e.detail.value].text;
		},
		startTimeChange: function(e) {
			this.registInfo.BeginTime = this.timeRange[0][e.detail.value[0]] + ':' + this.timeRange[1][e.detail.value[1]];
		},
		endTimeChange: function(e) {
			this.registInfo.EndTime = this.timeRange[0][e.detail.value[0]] + ':' + this.timeRange[1][e.detail.value[1]];
		},
		changeSetSign: function() {
			uni.navigateTo({
				url: './setSign/index?sign=' + encodeURIComponent(JSON.stringify(this.registInfo.Sign ? this.registInfo.Sign : ''))
			});
		},
		next: function() {
			if (this.registInfo.ServePlayType == '1') {
				if (isBlankString(this.registInfo.HourlyWage)) {
					uni.showToast({
						icon: 'none',
						title: '请输入时薪'
					});
					return;
				}
			}

			if (this.registInfo.ServePlayType == '2') {
				if (isBlankString(this.registInfo.HourlyWage)) {
					uni.showToast({
						icon: 'none',
						title: '请输入价格'
					});
					return;
				}
				if (this.registInfo.ServeTagList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择标签'
					});
					return;
				}
			}

			if (isBlankString(this.registInfo.NickName)) {
				uni.showToast({
					icon: 'none',
					title: '请输入昵称'
				});
				return;
			}
			if (!isPhoneNumber(this.registInfo.Phone)) {
				uni.showToast({
					icon: 'none',
					title: '请输入正确手机号'
				});
				return;
			}
			if (!this.isAgree) {
				uni.showToast({
					icon: 'none',
					title: '请先同意协议'
				});
				return;
			}
			uni.navigateTo({
				url: './authentication/index?registInfo=' + encodeURIComponent(JSON.stringify(this.registInfo))
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.hint {
	background: #fee7e7;
	color: #fc2424;
	font-size: $main-text-size-28;
	text-align: center;
	height: 60rpx;
	line-height: 60rpx;
}

.header-img {
	width: 96rpx;
	height: 96rpx;
	border-radius: 50%;
}

.tips-text {
	color: $main-text-color-grey;
	font-size: $main-text-size-20;
}

.radio {
	margin-left: 40rpx;
}

.select-protocol {
	font-size: $main-text-size-32;
	margin-top: 100px;
	padding-left: 30rpx;
	color: $main-text-color-gray-33;
	display: flex;
	align-items: center;
	&-link {
		color: #68c8ff;
	}
}

.next {
	padding: 30rpx;
	padding-bottom: 40rpx;
	&-btn {
		color: #ffffff;
		font-size: $main-text-size-32;
	}
}

.all-tag {
	display: inline-block;
	margin-left: 20rpx;
	margin-top: 20rpx;
}

.uni-drawer__content {
	width: 400rpx;
}

.vc-item {
	padding: 30rpx 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2rpx solid $main-line-color-gray-F5;
	font-family: 'SourceHanSansCN-Regular';
	&-content {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: $main-text-color-gray-33;
		font-size: $main-text-size-32;
		max-width: 75%;
		min-width: 30%;
		.date-line {
			background-color: #333;
			width: 20rpx;
			height: 2rpx;
		}

		&-input {
			text-align: right;
		}
		.choose-tips-text {
			color: $main-text-color-grey;
		}
	}
	&-arrow {
		width: 18rpx;
		height: 32rpx;
		margin-left: 10rpx;
	}
}

.label-tag {
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
	font-size: $main-text-size-26;
	border: 2rpx solid #fcc309;
	margin-right: 10rpx;
	margin-bottom: 10rpx;
	display: inline-block;
	color: #fcc309;
}

/deep/ .vc-item-content-input-placeholder {
	color: $main-text-color-grey;
	font-size: $main-text-size-32;
}

.play-type-radio-group {
	display: flex;
	padding: 40rpx 140rpx;
	justify-content: space-between;
	.radio-item-label {
		display: flex;
		align-items: center;

		&-title {
			color: #141414;
			font-size: $main-text-size-32;
			margin-left: 14rpx;
		}
	}
}
</style>
